<template>
	<scroll-page :refresherEnabled="false" @scrolltolower="onScrollTolLower">
		<view class="index-page" :style="{ backgroundPositionY: -48 + safeAreaInsets.top + 'px' }">
			<!--  -->
			<!-- 页面导航 -->
			<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">优医</view>

			<!-- 搜索栏 -->
			<view class="search-bar">
				<input placeholder-class="input-placeholder" placeholder="搜一搜: 疾病/症状/医生/健康知识" class="input" type="text" />
				<view class="icon-search">
					<uni-icons size="22" color="#C3C3C5" type="search" />
				</view>
			</view>
			<!-- 快速入口 -->
			<view class="quick-entry">
				<navigator hover-class="none" class="quick-entry-item" url="/subpkg_consult/quickly/quickly?type=1">
					<image class="quick-entry-icon" src="/static/images/quick-entry-1.png" />
					<text class="label">问医生</text>
					<text class="small">按科室查问医生</text>
				</navigator>
				<navigator hover-class="none" class="quick-entry-item" url="/subpkg_consult/quickly/quickly?type=2">
					<image class="quick-entry-icon" src="/static/images/quick-entry-2.png" />
					<text class="label">极速问诊</text>
					<text class="small">20s医生极速回复</text>
				</navigator>
				<navigator hover-class="none" class="quick-entry-item" url="/subpkg_consult/quickly/quickly?type=3">
					<image class="quick-entry-icon" src="/static/images/quick-entry-3.png" />
					<text class="label">开药门诊</text>
					<text class="small">线上买药更方便</text>
				</navigator>
			</view>
			<!-- 快速查看 -->
			<view class="quick-view">
				<navigator hover-class="none" class="quick-view-item" url="/subpkg_medicine/order_list/index">
					<image class="quick-view-icon" src="/static/images/quick-view-1.png" />
					<text class="label">药品订单</text>
				</navigator>
				<navigator hover-class="none" class="quick-view-item" url="/subpkg_archive/list/index">
					<image class="quick-view-icon" src="/static/images/quick-view-2.png" />
					<text class="label">健康档案</text>
				</navigator>
				<navigator hover-class="none" class="quick-view-item">
					<image class="quick-view-icon" src="/static/images/quick-view-3.png" />
					<text class="label">我的处方</text>
				</navigator>
				<navigator hover-class="none" class="quick-view-item">
					<image class="quick-view-icon" src="/static/images/quick-view-4.png" />
					<text class="label">疾病查询</text>
				</navigator>
			</view>
			<!-- 广告位 -->
			<view class="banner-placeholder">
				<swiper class="uni-swiper" indicator-dots indicator-color="#ffffff99" indicator-active-color="#fff" circular>
					<swiper-item>
						<navigator hover-class="none" class="navigator" url=" ">
							<image class="banner-image" src="/static/images/banner-1.png" />
						</navigator>
					</swiper-item>
					<swiper-item>
						<navigator hover-class="none" class="navigator" url=" ">
							<image class="banner-image" src="/static/images/banner-1.png" mode="aspectFill" />
						</navigator>
					</swiper-item>
				</swiper>
			</view>
			<!-- 标签切换 -->
			<view class="doctor-feeds" :style="{ marginTop: -safeAreaInsets.top + 'px' }">
				<custom-sticky :offset-top="safeAreaInsets.top + 'px'">
					<custom-tabs @click="onFeedTabChange" :list="feedTabs" />
				</custom-sticky>

				<!-- 刚开始是点击切换一次tab，就发送一次请求，这样是比较消耗性能的，
						优化：遍历循环tab，内容显示用v-show来判断，点击到哪个tab就展示对应的内容
						首次渲染使用v-if，给rendered属性值修改为true,表示渲染过，再次点击就不会发送请求
						
				 -->
				<view class="listview" v-for="(item, index) in feedTabs" :key="item.type" v-show="tabIndex === index">
					<!-- 医生列表 -->
					<doctorList :list="doctorStore.doctorList" v-show="item.type == 'recommend'" />
					<feedList :list="item.list" v-if="item.rendered" />
				</view>
			</view>
		</view>
	</scroll-page>
</template>

<script setup>
import { ref, computed } from 'vue';
import useDoctorStore from '@/store/doctor.js';
import feedList from './components/feed-list.vue';
import doctorList from './components/doctor-list.vue';

const doctorStore = useDoctorStore();
// 获取安全区域数据
const { safeAreaInsets } = uni.getSystemInfoSync();

// 标签页索引值
const tabIndex = ref(0);
// 标签页数据
const feedTabs = ref([
	{ label: '推荐', type: 'recommend', current: 1, hasMore: true, list: [], rendered: true },
	{ label: '关注', type: 'like', current: 1, hasMore: true, list: [], rendered: false },
	{ label: '减脂', type: 'fatReduction', current: 1, hasMore: true, list: [], rendered: false },
	{ label: '饮食', type: 'food', current: 1, hasMore: true, list: [], rendered: false }
]);

const feedType = computed(() => feedTabs.value[tabIndex.value].type);

const feedCurrent = computed(() => feedTabs.value[tabIndex.value].current);

const feedPageSize = ref(5);
// 切换标签页
const onFeedTabChange = ({ index }) => {
	tabIndex.value = index;
	if (!feedTabs.value[index].rendered) getFeedList();
};
async function getFeedList() {
	await doctorStore.feedListApiAction({
		type: feedType.value,
		current: feedCurrent.value,
		pageSize: feedPageSize.value
	});
	const current = feedTabs.value[tabIndex.value].current;
	feedTabs.value[tabIndex.value].list = [...feedTabs.value[tabIndex.value].list, ...doctorStore.list];
	feedTabs.value[tabIndex.value].current++;

	feedTabs.value[tabIndex.value].hasMore = current + 1 <= doctorStore.feedListTotal;
	feedTabs.value[tabIndex.value].rendered = true;
}
// 滚动到底部
const onScrollTolLower = () => {
	if (feedTabs.value[tabIndex.value].hasMore) getFeedList();
};

getFeedList();
doctorStore.doctorListApiAction();
</script>

<style lang="scss">
.index-page {
	min-height: 260rpx;
	background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/index-page-header-bg.png);
	background-size: contain;
	background-repeat: no-repeat;
	/* #ifdef H5 */
	padding-top: 10rpx;
	/* #endif */
}

.page-navbar {
	height: 88rpx;
	line-height: 88rpx;
	padding: 0 30rpx;
	font-size: 34rpx;
	color: #fff;
}

.search-bar {
	height: 80rpx;
	padding: 0 30rpx;
	margin-top: 10rpx;
	/* #ifdef H5 */
	margin-top: 0rpx;
	/* #endif */
	position: relative;

	.input {
		height: 100%;
		padding-left: 80rpx;
		padding-right: 40rpx;
		border-radius: 80rpx;
		background-color: #fff;
		font-size: 26rpx;
		color: #3c3e42;
		box-shadow: 0px 10rpx 22rpx rgba(0, 0, 0, 0.1);
	}

	.input-placeholder {
		color: #979797;
	}

	.icon-search {
		position: absolute;
		top: 50%;
		transform: translate(24rpx, -50%);
		margin-top: 2rpx;
	}
}

.quick-entry {
	display: flex;
	justify-content: space-around;
	line-height: 1;
	padding: 50rpx 30rpx 40rpx;

	.label {
		margin: 20rpx 0 10rpx;
		font-size: 28rpx;
		color: #121826;
	}

	.small {
		font-size: 22rpx;
		color: #848484;
	}

	&-icon {
		width: 92rpx;
		height: 92rpx;
	}

	:deep(.navigator-wrap) {
		display: flex;
		align-items: center;
		flex-direction: column;
	}
}

.quick-view {
	display: flex;
	justify-content: space-around;
	line-height: 1;
	padding: 10rpx 30rpx;

	.label {
		margin: 20rpx 0 10rpx;
		font-size: 28rpx;
		color: #121826;
	}

	&-icon {
		width: 62rpx;
		height: 62rpx;
	}

	:deep(.navigator-wrap) {
		display: flex;
		align-items: center;
		flex-direction: column;
	}
}

.banner-placeholder {
	height: 200rpx;
	padding: 0 30rpx;
	margin: 20rpx 0;
	position: relative;
	z-index: 101;

	.uni-swiper {
		height: 200rpx;
	}

	.banner-image {
		width: 100%;
		height: 200rpx;
		// border-radius: 30rpx;
	}
}

.doctor-feeds {
	// position: relative;
}
</style>
